<template>
  <fks-dialog
    :visible.sync="show"
    @close="close"
    :append-to-body="true"
    destroy-on-close
  >
    <div slot="title">
      <i class="fks-icon-setting"></i>
      <span>{{ LANG.RULE_CONFIG }}</span>
    </div>
    <div class="rule-container">
      <div class="row-config">
        <div class="row-label config-list">{{ LANG.RULE_CONFIG }}</div>
        <div class="cascader-box">
          <div class="tag-container">
            <div v-for="tag in tags" :key="tag.id" class="tag-item">
              <fks-tooltip placement="top" v-if="tag.value.type != 4">
                <div slot="content">
                  <template v-if="tag.value.type == 1">
                    <div>{{ LANG.DICTVALUE }}：{{ tag.value.dictValue }}</div>
                    <div>{{ LANG.DICT_DESC }}：{{ tag.value.comment }}</div>
                  </template>
                  <template v-if="tag.value.type == 2">
                    <div>{{ LANG.DIGIT }}：{{ tag.value.digit }}</div>
                    <div>
                      {{ LANG.INITIAL_VALUE }}：{{ tag.value.initialValue }}
                    </div>
                    <div>
                      {{ LANG.INCREMENT_VALUE }}：{{ tag.value.incrementValue }}
                    </div>
                    <div>{{ LANG.END_VALUE }}：{{ tag.value.endValue }}</div>
                    <div>{{ LANG.REMARK }}：{{ tag.value.remark }}</div>
                  </template>
                </div>
                <fks-tag
                  :closable="operateType != 'view'"
                  @close="closeTag(tag)"
                  :type="tag.type"
                >
                  {{ tag.name }}
                </fks-tag>
              </fks-tooltip>
              <fks-tag
                v-if="tag.value.type == 3 || tag.value.type == 4"
                :closable="operateType != 'view'"
                @close="closeTag(tag)"
                :type="tag.type"
              >
                {{ tag.name }}
              </fks-tag>
            </div>
          </div>
          <div class="search-bar" v-clickoutside="closeCascader">
            <fks-input
              v-if="searchVisible"
              v-model="text"
              clearable
              @clear="searchMetaCode"
              @keyup.enter.native="searchMetaCode"
              maxlength="50"
              style="cursor: pointer"
              :placeholder="LANG.SEARCHABLE_METACODE"
            >
              <i
                class="fks-icon-search fks-input__icon"
                slot="suffix"
                @click="searchMetaCode"
              >
              </i
            ></fks-input>
            <fks-button
              v-if="!searchVisible"
              :disabled="operateType == 'view'"
              icon="fks-icon-plus"
              @click="showCascader"
            ></fks-button>
            <div
              v-if="!cascaderVisible && searchResults.length != 0"
              class="list-container"
            >
              <div class="list-box" ref="listBox">
                <div
                  class="list-item"
                  v-for="item in searchResults"
                  :key="item.value.name"
                  @mouseenter="handleMouseEnter(item, $event)"
                  @mouseleave="handleMouseLeave"
                  @click="clickResult(item)"
                >
                  <div class="list-content-bg"></div>
                  <div class="list-content">
                    <div>
                      <span class="list-label">{{ item.category }}</span>
                      <span style="margin: 0 4px">/</span>
                      <span>{{
                        item.category == LANG.CONNECTOR
                          ? item.value.name == LANG.SPACE
                            ? item.value.comment
                            : item.value.dictValue
                          : item.value.name
                      }}</span>
                    </div>
                    <i
                      v-if="item.value.type == 'timeProperties'"
                      class="fks-icon-arrow-right"
                    ></i>
                  </div>
                </div>
                <div
                  class="desc-box"
                  :style="{ left: 240 + 'px', top: topHeight + 'px' }"
                  v-if="desc.category == LANG.FIXED_CODE && showDesc"
                >
                  <div class="dic-value">
                    {{ LANG.DICTVALUE }}：{{ desc.value.dictValue }}
                  </div>
                  <div class="comment">
                    {{ LANG.DICT_DESC }}：{{ desc.value.comment }}
                  </div>
                </div>
                <div
                  class="desc-box"
                  :style="{ left: 240 + 'px', top: topHeight + 'px' }"
                  v-if="desc.category == LANG.SERIAL_CODE && showDesc"
                >
                  <div>{{ LANG.DIGIT }}：{{ desc.value.digit }}</div>
                  <div>
                    {{ LANG.INITIAL_VALUE }}：{{ desc.value.initialValue }}
                  </div>
                  <div>
                    {{ LANG.INCREMENT_VALUE }}：{{ desc.value.incrementValue }}
                  </div>
                  <div>{{ LANG.END_VALUE }}：{{ desc.value.endValue }}</div>
                  <div class="comment remark">
                    {{ LANG.REMARK }}：{{ desc.value.remark }}
                  </div>
                </div>
              </div>
              <div class="list-box" v-if="showTimeFormat">
                <div
                  class="list-item"
                  v-for="item in timeFormatList"
                  :key="item"
                  @click="addFormatFiniteCode(item)"
                >
                  <div class="list-content-bg"></div>
                  <div class="list-content">
                    <span class="list-label">{{ item }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="noDataVisible" class="list-container">
              <div class="list-box">
                <div class="no-data">{{ LANG.NO_DATA }}</div>
              </div>
            </div>
            <div class="list-container" v-if="cascaderVisible">
              <div class="list-box">
                <div class="list-item" @click="addMetaCode">
                  <div class="list-content-bg"></div>
                  <div class="list-content">
                    <span class="btn">
                      <i class="fks-icon-plus list-label"></i>
                      <span style="margin-left: 8px">{{
                        LANG.NEW_METACODE
                      }}</span>
                    </span>
                  </div>
                </div>
                <div
                  class="list-item"
                  v-for="item in searchSources"
                  :key="item.label"
                  @click="showSecondLevel(item)"
                >
                  <div
                    class="list-content-bg"
                    :class="{ clicked: clickType == item.label }"
                  ></div>
                  <div
                    class="list-content"
                    :class="{ 'clicked-text': clickType == item.label }"
                  >
                    <span class="list-label">{{ item.label }} </span
                    ><i class="fks-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
              <div
                class="list-box"
                ref="listBox"
                v-if="optionsChildren.length != []"
              >
                <div
                  class="list-item"
                  :class="{ 'join-char': clickType == LANG.CONNECTOR }"
                  v-for="item in optionsChildren"
                  :key="item.id"
                  @click="handleClickCode(item)"
                  @mouseenter="handleMouseEnter(item, $event)"
                  @mouseleave="handleMouseLeave"
                >
                  <div
                    class="list-content-bg"
                    :class="{
                      clicked:
                        selectProperty == item.name &&
                        item.type == 'timeProperties'
                    }"
                  ></div>
                  <div
                    class="list-content"
                    :class="{
                      'clicked-text':
                        selectProperty == item.name &&
                        item.type == 'timeProperties'
                    }"
                  >
                    <span
                      class="list-label"
                      v-if="clickType != LANG.CONNECTOR"
                      >{{ item.name }}</span
                    >
                    <i
                      v-if="item.type == 'timeProperties'"
                      class="fks-icon-arrow-right"
                    ></i>
                    <fks-button v-if="clickType == LANG.CONNECTOR">{{
                      item.dictValue == ' ' ? item.comment : item.dictValue
                    }}</fks-button>
                  </div>
                </div>
                <div
                  class="desc-box"
                  :style="{ top: topHeight + 'px' }"
                  v-if="clickType == LANG.FIXED_CODE && showDesc"
                >
                  <div class="dic-value">
                    {{ LANG.FIXED_CODE }}：{{ desc.dictValue }}
                  </div>
                  <div class="comment">
                    {{ LANG.DICT_DESC }}：{{ desc.comment }}
                  </div>
                </div>
                <div
                  class="desc-box"
                  :style="{ top: topHeight + 'px' }"
                  v-if="clickType == LANG.SERIAL_CODE && showDesc"
                >
                  <div>{{ LANG.DIGIT }}：{{ desc.digit }}</div>
                  <div>{{ LANG.INITIAL_VALUE }}：{{ desc.initialValue }}</div>
                  <div>
                    {{ LANG.INCREMENT_VALUE }}：{{ desc.incrementValue }}
                  </div>
                  <div>{{ LANG.END_VALUE }}：{{ desc.endValue }}</div>
                  <div class="comment remark">
                    {{ LANG.REMARK }}：{{ desc.remark }}
                  </div>
                </div>
              </div>
              <div class="list-box" v-if="showTimeFormat">
                <div
                  class="list-item"
                  v-for="item in timeFormatList"
                  :key="item"
                  @click="addFormatFiniteCode(item)"
                >
                  <div class="list-content-bg"></div>
                  <div class="list-content">
                    <span class="list-label">{{ item }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row-item" v-for="item in systemNums" :key="item.id">
        <div class="row-label">
          <span>“{{ item.name }}”{{ LANG.AND }}</span>
          <fks-tooltip placement="top">
            <div slot="content" class="tips-container">
              {{ LANG.SERIAL_CODE_TIP }}
            </div>
            <i class="fks-icon-question" />
          </fks-tooltip>
        </div>
        <fks-select
          v-model="item.bindList"
          multiple
          collapse-tags
          :disabled="operateType == 'view'"
        >
          <fks-option
            v-for="item in finiteCodeList"
            :key="item.id"
            :label="
              item.dateFormatter
                ? `${item.propertyName}(${item.dateFormatter})`
                : item.propertyName
            "
            :value="item.id"
          ></fks-option>
        </fks-select>
        <span class="bind-tip">{{ LANG.BINDING_USE }}</span>
      </div>
    </div>
    <span slot="footer" class="dialog-footer" v-if="operateType != 'view'">
      <fks-button @click="saveDraftRule">
        <svg-icon icon-class="SAVEDRAFT"></svg-icon>
        <span style="margin-left: 8px">{{ LANG.SAVEDRAFT }}</span>
      </fks-button>
      <fks-button icon="fks-icon-check" type="primary" @click="enableRule">{{
        LANG.ENABLE
      }}</fks-button>
    </span>
    <add-code
      v-if="codeDialogVisible"
      :visible.sync="codeDialogVisible"
      :type="'dialogAdd'"
      @closeAddCode="getAllCodeDetail"
    ></add-code>
  </fks-dialog>
</template>
<script>
import {
  getAllCodeDetail,
  addFiniteCode,
  enableRule,
  saveDraftRule,
  getModelEncode,
  changeModelRule
} from '../api'
import AddCode from '../AddCode'
export default {
  name: 'RuleConfig',
  components: {
    AddCode
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    operateType: {
      type: String,
      default: 'add'
    },
    ruleData: {
      type: Object
    }
  },
  data() {
    return {
      show: this.visible,
      text: '',
      cascaderVisible: false,
      searchVisible: false,
      noDataVisible: false,
      tags: [],
      clickType: '',
      optionsChildren: [],
      selectProperty: '',
      codeDialogVisible: false,
      systemNums: [],
      finiteCodeList: [],
      createdFiniteCode: {},
      topHeight: 0,
      searchSources: [],
      searchResults: [],
      desc: {},
      showDesc: false,
      showTimeFormat: false,
      timeFormatList: [
        'yyyy-MM-dd HH:mm:ss',
        'yyyy-MM-dd HH:mm',
        'yyyy-MM-dd HH',
        'yyyy-MM-dd',
        'yyyy-MM',
        'yyyy-ww',
        'yyyy',
        'MM',
        'ww',
        'dd',
        'HH',
        'mm',
        'ss'
      ]
    }
  },
  watch: {
    visible(val) {
      this.show = val
    }
  },
  mounted() {
    this.getAllCodeDetail()
    if (this.operateType != 'add') {
      this.getModelEncode()
    }
  },
  methods: {
    //获取模型规则详情
    getModelEncode() {
      getModelEncode({ modelId: this.ruleData.objFullName })
        .then((res) => {
          if (res.status) {
            this.tags = res.data.structureList.map((item, index) => {
              let tempTag = {}
              if (item.type == 4) {
                tempTag = {
                  id: item.id + `${index}`,
                  name: item.remark
                    ? `${item.propertyName}(${item.remark})`
                    : item.propertyName,
                  value: item
                }
              } else {
                tempTag = {
                  id: item.id + `${index}`,
                  name:
                    item.type === 1
                      ? item.remark
                        ? item.name == this.LANG.SPACE
                          ? item.name
                          : item.dictValue
                        : item.name
                      : item.name,
                  value: item
                }
              }
              return tempTag
            })
            this.tags.forEach((item) => {
              if (item.value.type == 2) {
                this.systemNums.push({
                  name: item.name,
                  id: item.id,
                  value: item.value,
                  bindList: []
                })
              }
            })
            res.data.serialCodeAffectItemParamList.forEach((item) => {
              this.systemNums.forEach((val) => {
                if (val.id == item.serialCodeId + `${item.itemIndex}`) {
                  val.bindList = item.metaCodeIdList
                }
              })
            })
            // this.systemNums = res.data.serialCodeAffectItemParamList.map(
            //   (item, index) => {
            //     return {
            //       name: this.tags[item.itemIndex].name,
            //       bindList: item.metaCodeIdList,
            //       id: item.serialCodeId + `${item.itemIndex}`,
            //       value: item
            //     }
            //   }
            // )
            this.finiteCodeList = res.data.fieldEnvList
              ? res.data.fieldEnvList.map((item) => {
                  return {
                    id: item.codeId,
                    propertyName: item.fieldEnglishName,
                    dateFormatter: item.dateFormatter
                  }
                })
              : []
          }
        })
        .catch((err) => {})
    },
    //显示级联块
    showCascader() {
      this.searchVisible = true
      this.cascaderVisible = true
      this.noDataVisible = false
      this.optionsChildren = []
      this.clickType = ''
      this.text = ''
      this.showTimeFormat = false
      this.selectProperty = ''
    },
    //隐藏级联块
    closeCascader() {
      this.cascaderVisible = false
      this.searchVisible = false
      this.noDataVisible = false
      this.text = ''
      this.searchResults = []
      this.showDesc = false
      this.showTimeFormat = false
      this.selectProperty = ''
      this.desc = {}
    },
    //打开新建元码弹框
    addMetaCode() {
      this.codeDialogVisible = true
    },
    //获取全部元码详情
    getAllCodeDetail() {
      getAllCodeDetail()
        .then((res) => {
          if (res.status) {
            this.searchSources = JSON.parse(JSON.stringify(res.data))
            let timeProperties = this.ruleData.timeProperties.map((item) => {
              return { name: item, type: 'timeProperties' }
            })
            let ordinaryProperties = this.ruleData.ordinaryProperties.map(
              (item) => {
                return { name: item, type: 'ordinaryProperties' }
              }
            )
            let prooperties = [...timeProperties, ...ordinaryProperties]
            this.searchSources.push({
              label: this.LANG.PROPERTY,
              content: prooperties
            })
          }
        })
        .catch((err) => {})
    },
    //搜索元码
    searchMetaCode() {
      if (this.text == '') {
        this.showCascader()
        return
      }
      this.cascaderVisible = false
      this.noDataVisible = false
      this.searchResults = []
      this.searchSources.forEach((item) => {
        if (item.label.includes(this.text)) {
          item.content.forEach((val) => {
            let tempResult = {
              category: item.label,
              value: val
            }
            this.searchResults.push(tempResult)
          })
        } else if (item.label == this.LANG.CONNECTOR) {
          item.content.forEach((val) => {
            if (val.dictValue.includes(this.text)) {
              let tempResult = {
                category: item.label,
                value: val
              }
              this.searchResults.push(tempResult)
            }
          })
        } else {
          item.content.forEach((val) => {
            if (val.name.includes(this.text)) {
              let tempResult = {
                category: item.label,
                value: val
              }
              this.searchResults.push(tempResult)
            }
          })
        }
      })
      if (this.searchResults.length == 0) {
        this.noDataVisible = true
      }
    },
    //关闭tag标签
    closeTag(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1)
      let tagNames = this.tags.map((item) => {
        return item.name
      })
      this.systemNums.forEach((item, index) => {
        if (item.id == tag.id) {
          this.systemNums.splice(index, 1)
        }
        if (
          tagNames.indexOf(tag.name) == -1 &&
          item.bindList.indexOf(tag.value.id) != -1
        ) {
          item.bindList.splice(item.bindList.indexOf(tag.value.id), 1)
        }
      })
      this.finiteCodeList.forEach((item, index) => {
        if (item.id == tag.value.id && tagNames.indexOf(tag.name) == -1) {
          this.finiteCodeList.splice(index, 1)
        }
      })
    },
    //展示第二级
    showSecondLevel(item) {
      this.clickType = item.label
      this.optionsChildren = JSON.parse(JSON.stringify(item.content))
    },
    //鼠标移入元码
    handleMouseEnter(item, event) {
      this.topHeight = event.target.offsetTop - this.$refs.listBox.scrollTop
      this.showDesc = true
      this.desc = JSON.parse(JSON.stringify(item))
    },
    //鼠标移出元码
    handleMouseLeave() {
      this.showDesc = false
      this.desc = {}
    },
    //点击查询结果项
    clickResult(item) {
      this.selectProperty = item.value.name
      if (item.category == this.LANG.PROPERTY) {
        item.value.type == 'timeProperties'
          ? (this.showTimeFormat = true)
          : this.addFiniteCode(item)
      } else {
        let tempTag = {
          name:
            item.category == this.LANG.CONNECTOR
              ? item.value.dictValue == ' '
                ? item.value.comment
                : item.value.dictValue
              : item.value.name,
          value: item.value,
          id: Date.now()
        }
        this.tags.push(tempTag)
        if (item.category == this.LANG.SERIAL_CODE) {
          this.systemNums.push(tempTag)
        }
        this.closeCascader()
      }
    },
    handleClickCode(item) {
      if (this.clickType == this.LANG.PROPERTY) {
        this.showTimeFormat = false
        this.selectProperty = item.name
        return this.addFiniteCode(item)
      }
      let tempTag = {
        name:
          this.clickType == this.LANG.CONNECTOR
            ? item.dictValue == ' '
              ? item.comment
              : item.dictValue
            : item.name,
        value: item,
        id: Date.now()
      }
      this.tags.push(tempTag)
      if (this.clickType == this.LANG.SERIAL_CODE) {
        this.systemNums.push(tempTag)
      }
      this.closeCascader()
    },
    //创建有限码
    addFiniteCode(item) {
      if (item.type == 'timeProperties') {
        return (this.showTimeFormat = true)
      }
      let tempCodeName = this.tags.map((tag) => {
        return tag.name
      })
      if (tempCodeName.includes(this.selectProperty)) {
        for (let i = 0; i < this.tags.length; i++) {
          if (this.tags[i].name == this.selectProperty) {
            let tempTag = {
              name: this.tags[i].name,
              value: this.tags[i].value,
              id: Date.now()
            }
            this.tags.push(tempTag)
            this.closeCascader()
            return
          }
        }
      } else {
        let params = {
          propertyName: this.selectProperty,
          type: 4,
          digitFixed: false,
          unique: true,
          order: false
        }
        addFiniteCode(params)
          .then((res) => {
            if (res.status) {
              let tempTag = {
                name: res.data.propertyName,
                value: res.data,
                id: Date.now()
              }
              this.tags.push(tempTag)
              this.finiteCodeList.push(res.data)
              this.closeCascader()
            }
          })
          .catch((err) => {})
      }
    },
    addFormatFiniteCode(item) {
      let dateFormatter = item
      let tempCodeName = this.tags.map((tag) => {
        return tag.name
      })
      if (tempCodeName.includes(`${this.selectProperty}(${item})`)) {
        for (let i = 0; i < this.tags.length; i++) {
          if (this.tags[i].name == `${this.selectProperty}(${item})`) {
            let tempTag = {
              name: this.tags[i].name,
              value: this.tags[i].value,
              id: Date.now()
            }
            this.tags.push(tempTag)
            this.closeCascader()
            return
          }
        }
      } else {
        let params = {
          propertyName: this.selectProperty,
          type: 4,
          digitFixed: false,
          unique: true,
          order: false,
          remark: item
        }
        addFiniteCode(params)
          .then((res) => {
            if (res.status) {
              let tempTag = {
                name: `${res.data.propertyName}(${item})`,
                value: res.data,
                id: Date.now()
              }
              this.tags.push(tempTag)
              let tempFiniteCode = {
                propertyName: res.data.propertyName,
                id: res.data.id,
                dateFormatter: dateFormatter
              }
              this.finiteCodeList.push(tempFiniteCode)
              this.closeCascader()
            }
          })
          .catch((err) => {})
      }
    },
    //整理暂存和启用提交参数
    setParams() {
      let fieldRelationParamList = this.finiteCodeList.map((item) => {
        return {
          codeId: item.id,
          fieldEnglishName: item.propertyName,
          dateFormatter: item.dateFormatter
        }
      })
      let serialCodeAffectItemParamList = []
      this.tags.forEach((item, index) => {
        this.systemNums.forEach((val) => {
          if (val.bindList.length != 0 && val.id == item.id) {
            let tempObj = {
              itemIndex: index,
              metaCodeIdList: val.bindList,
              serialCodeId: val.value.id || val.value.serialCodeId
            }

            serialCodeAffectItemParamList.push(tempObj)
          }
        })
      })
      let submitParams = {
        modelId: this.ruleData.objFullName,
        modelName: this.ruleData.objName,
        fieldRelationParamList: fieldRelationParamList,
        metaCodeIdItemList: this.tags.map((item) => item.value.id),
        modelEnglishName: this.ruleData.objName,
        serialCodeAffectItemParamList:
          serialCodeAffectItemParamList.length == 0
            ? null
            : serialCodeAffectItemParamList,
        temporaryStorage: true
      }
      return submitParams
    },
    //暂存规则配置
    saveDraftRule() {
      let params = this.setParams()
      params.temporaryStorage = true
      if (params.metaCodeIdItemList.length == 0) {
        return this.$message.warning(this.LANG.NO_CODE_SELECTED)
      }
      if (this.operateType == 'add') {
        saveDraftRule(params)
          .then((res) => {
            if (res.status) {
              this.close()
              this.$message.success(this.LANG.SAVEDRAFT_SUCCESS)
            }
          })
          .catch((err) => {})
      } else {
        changeModelRule(params)
          .then((res) => {
            if (res.status) {
              this.close()
              this.$message.success(this.LANG.CONFIG_SUCCESS)
            }
          })
          .catch((err) => {})
      }
    },
    //配置编码
    enableRule() {
      let params = this.setParams()
      params.temporaryStorage = false
      if (params.metaCodeIdItemList.length == 0) {
        return this.$message.warning(this.LANG.NO_CODE_SELECTED)
      }
      if (this.operateType == 'add') {
        enableRule(params)
          .then((res) => {
            if (res.status) {
              this.close()
              this.$message.success(this.LANG.CONFIG_SUCCESS)
            }
          })
          .catch((err) => {})
      } else {
        params.modelName = null
        params.modelEnglishName = null
        changeModelRule(params)
          .then((res) => {
            if (res.status) {
              this.close()
              this.$message.success(this.LANG.CONFIG_SUCCESS)
            }
          })
          .catch((err) => {})
      }
    },
    close() {
      this.$emit('update:visible', false)
      this.$emit('closeRuleConfig')
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .fks-dialog {
  .fks-dialog__body {
    min-height: 414px;
  }
  .rule-container {
    .fks-select {
      width: 360px;
    }
  }
  .fks-icon-arrow-right {
    margin-right: 16px;
  }
  .fks-tag {
    height: 32px;
    line-height: 32px;
    &:not(last-child) {
      margin-right: 4px;
    }
  }
  .search-bar {
    display: flex;
    width: 248px;
    .fks-input {
      width: 240px;
      margin-right: 8px;
    }
    .fks-button {
      width: 72px;
      height: 32px;
    }
  }
}

.rule-container {
  .row-item {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
  }
  .row-config {
    display: flex;
    margin-bottom: 24px;
  }
  .row-label {
    line-height: 32px;
    min-width: 86px;
    text-align: right;
    margin-right: 12px;
  }
  .config-list::before {
    content: '*';
    color: #ff4d4f;
    margin-right: 4px;
  }
  .tag-container {
    display: flex;
    flex-wrap: wrap;
    .tag-item {
      margin-bottom: 12px;
    }
  }
  .no-data {
    padding: 8px 0;
    text-align: center;
  }
  .bind-tip {
    margin-left: 12px;
    font-size: 14px;
    color: #555555;
  }
}
.list-container {
  z-index: 9999;
  position: absolute;
  margin-top: 40px;
  display: flex;
  .list-box {
    width: 238px;
    overflow-y: scroll;
    height: 326px;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 4px 0px 0px 4px;
    &:not(:nth-of-type(1)) {
      border-left: none;
    }
    .list-item {
      position: relative;
      cursor: pointer;
      &:hover {
        // background: rgba(48, 83, 234, 0.1);
        .list-content-bg {
          background: var(--theme-color);
          opacity: 0.1;
        }
        .list-content {
          color: var(--theme-color);
        }
      }
      .list-content-bg {
        padding: 8px 0;
        min-height: 20px;
      }
      .list-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      .btn {
        color: var(--theme-color);
      }
    }
    .clicked {
      background: var(--theme-color);
      opacity: 0.1;
    }
    .clicked-text {
      color: var(--theme-color);
    }
    .join-char {
      height: auto;
      padding: 2px 0;
      &:hover {
        .list-content-bg {
          background: none;
          opacity: 1;
        }
        .list-content {
          color: none;
        }
      }
      // margin-bottom: 8px;
      &:nth-of-type(1) {
        margin-top: 12px;
      }
      &:last-child {
        margin-bottom: 12px;
      }
      .fks-button {
        width: 176px;
        height: 32px;
        margin: 0 auto;
      }
    }
    .list-label {
      margin-left: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dic-item {
      display: flex;
      cursor: auto;
      div {
        width: 50%;
      }
    }
  }
  .property-box {
    height: 326px;
    overflow-y: scroll;
  }
  .desc-box {
    position: absolute;
    left: 480px;
    top: 0;
    display: inline-block;
    width: 200px;
    background: #f5f5f5;
    border-radius: 4px;
    color: #555555;
    margin-left: 8px;
    padding: 4px 16px;
    font-size: 14px;
    box-sizing: border-box;
    line-height: 28px;
  }
  .dic-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .comment {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }
  .remark {
    -webkit-line-clamp: 3;
  }
}
</style>